<p-growl [(value)]="msgs" ></p-growl>

<div [@pageAnimation] = "'in'">
  <my-breadcrumb name1="数据管理" name2="form-primeng"></my-breadcrumb>

  <form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
    <p-panel header="面板">
      <div class="ui-grid ui-grid-responsive ui-grid-pad ui-fluid" style="margin: 10px 0px">
        <div class="ui-grid-row">
          <div class="ui-grid-col-2">
            First Name *:
          </div>
          <div class="ui-grid-col-6">
            <input pInputText type="text" formControlName="firstname" placeholder="Required"/>
          </div>
          <div class="ui-grid-col-4">
            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['firstname'].valid&&userform.controls['firstname'].dirty">
              <i class="fa fa-close"></i>
              Firstname is required
            </div>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-2">
            Last Name *:
          </div>
          <div class="ui-grid-col-6">
            <input pInputText type="text" formControlName="lastname" placeholder="Required"/>
          </div>
          <div class="ui-grid-col-4">
            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['lastname'].valid&&userform.controls['lastname'].dirty">
              <i class="fa fa-close"></i>
              Lastname is required
            </div>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-2">
            Password *:
          </div>
          <div class="ui-grid-col-6">
            <input pInputText type="password" formControlName="password" placeholder="Required - Min(6)"/>
          </div>
          <div class="ui-grid-col-4">
            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['password'].valid&&userform.controls['password'].dirty">
              <i class="fa fa-close"></i>
              <span *ngIf="userform.controls['password'].errors['required']">Password is required</span>
              <span *ngIf="userform.controls['password'].errors['minlength']">Must be longer than 6 characters</span>
            </div>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-2">
            Description:
          </div>
          <div class="ui-grid-col-6">
            <textarea pInputTextarea  formControlName="description"></textarea>
          </div>
          <div class="ui-grid-col-4"></div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-2">
            Gender *:
          </div>
          <div class="ui-grid-col-6">
            <p-dropdown [options]="genders" formControlName="gender" [autoWidth]="false"></p-dropdown>
          </div>
          <div class="ui-grid-col-4">
            <div class="ui-message ui-messages-error ui-corner-all" *ngIf="!userform.controls['gender'].valid&&userform.controls['gender'].dirty">
              <i class="fa fa-close"></i>
              Gender is required
            </div>
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-2"></div>
          <div class="ui-grid-col-6">
            <button pButton type="submit" label="Submit" [disabled]="!userform.valid"></button>
          </div>
          <div class="ui-grid-col-4"></div>
        </div>
        <div style="text-align:center;margin-top:20px" *ngIf="submitted">
          Form Submitted
          <br>
          {{diagnostic}}
        </div>
      </div>
    </p-panel>
  </form>
</div>

